<template>
  <view :data-theme="theme">
    <tui-skeleton v-if="showSkeleton"></tui-skeleton>
    <view
      class="product-con tui-skeleton"
      :style="{ visibility: showSkeleton ? 'hidden' : 'visible' }"
    >
      <view class="navbar" :class="opacity > 0.6 ? 'bgwhite' : ''">
        <view class="navbarH" :style="'height:' + navH + 'rpx;'">
          <view
            class="navbarCon acea-row"
            :style="{ paddingRight: navbarRight + 'px' }"
          >
            <!-- #ifdef MP -->
            <view
              class="select_nav flex justify-center align-center"
              id="home"
              :style="{ top: homeTop + 'rpx' }"
              :class="returnShow ? 'lang' : 'circle'"
            >
              <text
                v-if="returnShow"
                class="iconfont icon-fanhui2 px-20"
                @tap="returns"
              ></text>
              <navigator
                url="/pages/index/index"
                open-type="switchTab"
                class="iconfont icon-shouye7 px-20"
              ></navigator>
              <text v-if="returnShow" class="nav_line"></text>
            </view>
            <!-- #endif -->
            <!-- #ifdef H5 || APP-PLUS-->
            <view
              id="home"
              class="home acea-row row-center-wrapper iconfont icon-xiangzuo h5_back"
              :class="opacity > 0.5 ? 'on' : ''"
              :style="{ top: homeTopApp + 'px' }"
              @tap="returns"
            >
            </view>
            <!-- #endif -->
            <view class="tab_nav" v-show="opacity > 0.6">
              <view class="header flex align-center">
                <view
                  class="item"
                  :class="
                    navActive === index &&
                    (marketingType === ProductMarketingTypeEnum.Groupbuying||productType === ProductTypeEnum.Integral)
                      ? 'groupTabOn'
                      : navActive === index
                      ? 'on'
                      : ''
                  "
                  v-for="(item, index) in navList"
                  :key="index"
                  @tap="tap(index)"
                >
                  {{ item }}
                </view>
              </view>
            </view>
            <!-- #ifdef H5  || APP-PLUS-->
            <view
              class="right_select"
              :style="{ top: homeTopApp + 'px' }"
              @tap="showNav"
            >
              <text class="iconfont icon-gengduo2"></text>
            </view>
            <!-- #endif -->
          </view>
        </view>
      </view>
      <!-- 导航小图标 -->
      <view
        class="dialog_nav"
        v-show="currentPage"
        :style="{ top: navH + 'rpx' }"
      >
        <view
          class="dialog_nav_item"
          :class="item.after"
          v-for="(item, index) in selectNavList"
          :key="index"
          @click="linkPage(item.url)"
        >
          <text class="iconfont" :class="item.icon"></text>
          <text class="pl-20">{{ item.name }}</text>
        </view>
      </view>
      <!-- 商品详情 -->
      <view class="detail_container">
        <scroll-view
          :scroll-top="scrollTop"
          scroll-y="true"
          scroll-with-animation="true"
          :style="'height:' + height + 'px;'"
          @scroll="scroll"
        >
          <view id="past0">
            <!-- #ifdef MP || APP-PLUS -->
            <view
              class=""
              :style="'width:100%;' + 'height:' + sysHeight + 'px'"
            ></view>
            <!-- #endif -->
            <productConSwiper
              class="tui-skeleton-rect"
              :isGroup="marketingType"
              :imgUrls="sliderImage"
              :videoline="videoLink"
              :productType="productType"
              @videoPause="videoPause"
            ></productConSwiper>
            <!-- 秒杀card -->
            <seckill-card
              v-if="marketingType === ProductMarketingTypeEnum.Seckill"
              :seckillStatus="seckillStatus"
              :seckillTime="seckillTime"
              :productInfo="productInfo"
            ></seckill-card>
            <!-- 拼团card -->
            <group-card
              :productInfo="attr.productSelect"
              :groupBuyActivityResponse="groupBuyActivityResponse"
              v-if="marketingType === ProductMarketingTypeEnum.Groupbuying"
            ></group-card>
            <!-- 氛围图card -->
            <activity-style
              v-if="productInfo.activityStyle"
              :productInfo="productInfo"
            ></activity-style>

            <view
              class="borderPad"
              :class="
                marketingType === ProductMarketingTypeEnum.Seckill ||
                marketingType === ProductMarketingTypeEnum.Groupbuying
                  ? 'mtop'
                  : ''
              "
            >
              <view class="wrapper mb20 borRadius14">
                <view
                  v-if="
                    marketingType === ProductMarketingTypeEnum.Normal &&
                    !productInfo.activityStyle
                  "
                >
                  <view class="share acea-row row-between row-bottom mb10">
                    <!-- 积分商品价格 -->
                    <view
                      v-if="productType === ProductTypeEnum.Integral"
                      class="flex-y-center font-color-red"
                    >
                      <span class="semiBold font-color-red fs-40">{{
                        productPrice.redeemIntegral
                      }}</span
                      ><span class="f-s-36 font-color-red ml-4">积分</span>
                      <view v-show="productPrice.price > 0" class="ml-4">
                        +
                        <span class="semiBold ml-4 fs-40">{{
                          productPrice.price
                        }}</span
                        ><span class="f-s-36 font-color-red ml-4">元</span>
                      </view>
                    </view>
                    <!-- 其他商品价格 -->
                    <svip-price
                      v-else
                      :svipIconStyle="svipIconStyle"
                      :productPrice="productPrice"
                      :svipPriceStyle="svipPriceStyle"
                    ></svip-price>
                    <view
                      class="iconfont icon-fenxiang"
                      @click="listenerActionSheet"
                    ></view>
                  </view>
                  <view
                    v-if="couponList.length > 0"
                    class="acea-row row-between-wrapper"
                  >
                    <view class="flex-1 acea-row row-middle">
                      <span
                        v-for="(item, index) in couponList"
                        class="coupon_label"
                        >{{
                          item.minPrice === 0
                            ? "无门槛减" + item.money
                            : "满" + item.minPrice + "减" + item.money
                        }}</span
                      >
                    </view>
                    <view class="coupon_more" @click="couponTap"
                      >领券<text class="iconfont icon-you"></text>
                    </view>
                  </view>
                  <view class="introduce tui-skeleton-rect line2 mt30">{{
                    productInfo.name
                  }}</view>
                </view>
                <view
                  v-if="marketingType !== ProductMarketingTypeEnum.Normal"
                  class="share acea-row row-between row-bottom"
                >
                  <view class="introduce tui-skeleton-rect line2 lineWidth"
                    >{{ productInfo.name }}
                  </view>
                  <view
                    class="iconfont icon-fenxiang"
                    @click="listenerActionSheet"
                  ></view>
                </view>
                <view
                  v-if="
                    marketingType === ProductMarketingTypeEnum.Normal &&
                    productInfo.activityStyle
                  "
                >
                  <view
                    v-if="couponList.length > 0"
                    class="acea-row row-between-wrapper mb30"
                  >
                    <view class="flex-1 acea-row row-middle">
                      <span
                        v-for="(item, index) in couponList"
                        class="coupon_label"
                        >{{
                          item.minPrice === 0
                            ? "无门槛减" + item.money
                            : "满" + item.minPrice + "减" + item.money
                        }}</span
                      >
                    </view>
                    <view class="coupon_more" @click="couponTap"
                      >领券<text class="iconfont icon-you"></text>
                    </view>
                  </view>
                  <view class="share acea-row row-between row-bottom">
                    <view class="introduce tui-skeleton-rect line2 lineWidth"
                      >{{ productInfo.name }}
                    </view>
                    <view
                      class="iconfont icon-fenxiang"
                      @click="listenerActionSheet"
                    ></view>
                  </view>
                </view>
                <view class="label acea-row row-between-wrapper">
                  <view
                    class="tui-skeleton-rect"
                    v-if="
                      marketingType === ProductMarketingTypeEnum.Groupbuying
                    "
                  >
                    原价￥{{ attr.productSelect.price || 0 }}</view
                  >
                  <view class="tui-skeleton-rect" v-else>
                    {{
                      productType === ProductTypeEnum.Integral
                        ? "市场价:"
                        : "原价:"
                    }}￥{{
                      productType === ProductTypeEnum.Integral
                        ? attr.productSelect.cost
                        : attr.productSelect.otPrice || 0
                    }}
                  </view>
                  <!-- 拼团库存 -->
                  <view
                    class="tui-skeleton-rect"
                    v-if="
                      marketingType === ProductMarketingTypeEnum.Groupbuying
                    "
                  >
                    库存:{{ attr.productSelect.stock>0?attr.productSelect.groupStock:0
                    }}{{ productInfo.unitName || "" }}
                  </view>
                  <!-- 普通库存 -->
                  <view class="tui-skeleton-rect" v-else>
                    库存:{{ attr.productSelect.stock || 0
                    }}{{ productInfo.unitName || "" }}
                  </view>
				  <!-- 拼团销量 -->
				  <view class="tui-skeleton-rect"  v-if="
                      marketingType === ProductMarketingTypeEnum.Groupbuying
                    ">
					{{`销量:${groupBuyActivityResponse.sales}`}}{{ productInfo.unitName || "" }}
				  </view>
				  <!-- 其他销量 -->
                  <view class="tui-skeleton-rect"  v-if="
                      marketingType !== ProductMarketingTypeEnum.Groupbuying
                    ">
                    {{
                      productType === ProductTypeEnum.Integral
                        ? "已兑换:"
                        : "销量:"
                    }}{{
                      Math.floor(productInfo.sales) +
                        Math.floor(productInfo.ficti) || 0
                    }}{{ productInfo.unitName || "" }}
                  </view>
                </view>

                <view
                  class="coupon acea-row row-between-wrapper"
                  v-if="activityH5.length"
                >
                  <view class="line1 acea-row">
                    <text class="activityName tui-skeleton-rect"
                      >活&nbsp;&nbsp;&nbsp;动：</text
                    >
                    <view
                      v-for="(item, index) in activityH5"
                      :key="index"
                      @click="goActivity(item)"
                      class="activityBox"
                    >
                      <view
                        v-if="item.type === '1'"
                        class="tui-skeleton-rect"
                        :class="
                          index == 0
                            ? 'activity_pin'
                            : '' || index == 1
                            ? 'activity_miao'
                            : '' || index == 2
                            ? 'activity_kan'
                            : ''
                        "
                      >
                        <text class="iconfonts iconfont icon-miaosha1"></text>
                        <text class="activity_title"> 参与秒杀</text>
                      </view>
                      <view
                        class="tui-skeleton-rect"
                        :class="
                          index == 0
                            ? 'activity_pin'
                            : '' || index == 1
                            ? 'activity_miao'
                            : '' || index == 2
                            ? 'activity_kan'
                            : ''
                        "
                        v-if="item.type === '2'"
                      >
                        <text class="iconfonts iconfont icon-kanjia"></text>
                        <text class="activity_title"> 参与砍价</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <!-- 规格、保障服务 -->
              <view class="attribute mb20 borRadius14 tui-skeleton-rect">
                <view class="acea-row row-between-wrapper" @click="selecAttr">
                  <view class="line1 text-666"
                    >{{ attrTxt }}：
                    <text class="atterTxt text-333">{{ attrValue }}</text>
                  </view>
                  <view class="iconfont icon-jiantou"></view>
                </view>
                <view
                  class="acea-row row-between-wrapper"
                  style="margin-top: 7px; padding-left: 55px"
                  v-if="skuArr.length > 1"
                >
                  <view class="flex">
                    <image
                      :src="item.image"
                      v-for="(item, index) in skuArr.slice(0, 4)"
                      :key="index"
                      class="attrImg"
                    ></image>
                  </view>
                  <view class="switchTxt">共{{ skuArr.length }}种规格可选</view>
                </view>
                <view
                  v-if="guaranteeList.length > 0"
                  class="acea-row row-between-wrapper"
                  @click="assureDrawer = true"
                  style="margin-top: 45rpx"
                >
                  <view class="line1 tui-skeleton-fillet">
                    <text class="text-666 fw-bold"
                      >保&nbsp;&nbsp;&nbsp;障：</text
                    >
                    <text
                      class="text-333 tui-skeleton-fillet"
                      v-for="(item, index) in guaranteeList"
                      :key="index"
                      >{{ item.name }} ·
                    </text>
                  </view>
                  <view class="iconfont icon-jiantou"></view>
                </view>
              </view>
            </view>
          </view>
          <!-- 正在拼团 -->
          <group-doing
			:processItem="groupBuyActivityResponse.processItem"
            :groupBuyActivityResponse="groupBuyActivityResponse"
            @toGroup="toGroup"
            v-if="
              marketingType === ProductMarketingTypeEnum.Groupbuying &&
              groupBuyActivityResponse.showGroup
            "
          ></group-doing>
          <!-- 拼团玩法 -->
          <group-playing
            v-if="marketingType === ProductMarketingTypeEnum.Groupbuying"
          ></group-playing>
          <!-- 评价 -->
          <view
            v-show="productType !== ProductTypeEnum.Integral && replyCount > 0"
            id="past1"
            class="borderPad"
          >
            <view class="userEvaluation tui-skeleton-rect">
              <view
                class="title acea-row row-between-wrapper"
                :style="
                  replyCount == 0
                    ? 'border-bottom-left-radius:14rpx;border-bottom-right-radius:14rpx;'
                    : ''
                "
              >
                <view
                  >用户评价<i>({{ replyCount }})</i></view
                >
                <navigator
                  class="praise"
                  hover-class="none"
                  :url="
                    '/pages/goods/goods_comment_list/index?productId=' +
                    (Number(masterProductId) > 0 ? masterProductId : id)
                  "
                >
                  <i>好评</i>&nbsp;<text
                    :class="
                      (marketingType === ProductMarketingTypeEnum.Groupbuying||productType === ProductTypeEnum.Integral)
                        ? 'groupColor'
                        : 'font_color'
                    "
                    class=" px-12"
                    >{{ $util.$h.Mul(replyChance, 100) || 0 }}%</text
                  >
                  <text class="iconfont icon-jiantou"></text>
                </navigator>
              </view>
              <block v-if="replyCount">
                <userEvaluation :reply="reply"></userEvaluation>
              </block>
            </view>
          </view>
          <!-- 店铺 -->
          <view
            class="borderPad"
            v-if="
              productType !== ProductTypeEnum.Integral &&
              marketingType !== ProductMarketingTypeEnum.Groupbuying
            "
          >
            <view class="superior borRadius14" v-if="merchantInfo">
              <merHome
                :merchantInfo="merchantInfo"
                :merid="productInfo.merId"
                type="home"
                :isShowTypeId="isShowTypeId"
              ></merHome>
              <view class="slider-banner banner">
                <view class="list acea-row row-middle">
                  <view
                    class="item"
                    v-for="(val, indexw) in merchantInfo.proList"
                    :key="indexw"
                    @click="goDetail(val.id)"
                  >
                    <view class="pictrue">
                      <easy-loadimage
                        mode="widthFix"
                        :image-src="val.image"
                      ></easy-loadimage>
                    </view>
                    <view class="name line1">{{ val.name }}</view>
                    <view class="money theme_price">¥{{ val.price }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 产品详情 -->
          <view class="product-intro detailText" id="past2">
            <view class="title">
              <image src="../static/images/xzuo.png"></image>
              <span class="sp">产品详情</span>
              <image src="../static/images/xyou.png"></image>
            </view>
            <view class="conter borRadius14">
              <view class="borRadius14">
                <!-- #ifdef MP || APP-PLUS -->
                <mp-html :content="description" :tag-style="tagStyle" />
                <!-- #endif -->
                <!-- #ifdef H5 -->
                <view v-html="description" class="w-100-p111-"></view>
                <!-- #endif -->
              </view>
            </view>
          </view>
          <view style="height: 120rpx"></view>
        </scroll-view>
      </view>
      <!-- 脚部按钮 -->
      <view class="footer acea-row row-between-wrapper">
        <navigator
          v-if="marketingType !== ProductMarketingTypeEnum.Normal"
          :url="`/pages/merchant/home/index?id=${productInfo.merId}`"
          hover-class="none"
        >
          <view class="item tui-skeleton-rect">
            <view class="iconfont icon-dianpu1"></view>
            <view>店铺</view>
          </view>
        </navigator>
        <!-- #ifdef MP -->
        <button
          hover-class="none"
          class="item tui-skeleton-rect"
          @click="kefuClick"
          v-if="chatConfig.telephone_service_switch === 'true'"
        >
          <view class="iconfont icon-kefu"></view>
          <view>客服</view>
        </button>
        <button
          open-type="contact"
          hover-class="none"
          class="item tui-skeleton-rect"
          v-else
        >
          <view class="iconfont icon-kefu"></view>
          <view>客服</view>
        </button>
        <!-- #endif -->
        <!-- #ifndef MP -->
        <view class="item tui-skeleton-rect" @click="kefuClick">
          <view class="iconfont icon-kefu"></view>
          <view>客服</view>
        </view>
        <!-- #endif -->
        <view
          v-show="productType !== ProductTypeEnum.Integral"
          @click="setCollect"
          class="item tui-skeleton-rect"
        >
          <view class="iconfont icon-shoucang1 " :class="
                      marketingType === ProductMarketingTypeEnum.Groupbuying
                        ? 'color-normal'
                        : 'color-change'
                    " v-if="userCollect"></view>
          <view class="iconfont icon-shoucang" v-else></view>
          <view>收藏</view>
        </view>
        <!-- 普通商品 -->
        <block v-if="marketingType === ProductMarketingTypeEnum.Normal">
          <navigator
            v-show="productType !== ProductTypeEnum.Integral"
            open-type="switchTab"
            class="animated item tui-skeleton-rect"
            :class="animated == true ? 'bounceIn' : ''"
            url="/pages/order_addcart/order_addcart"
            hover-class="none"
          >
            <view class="iconfont icon-gouwuche1">
              <text v-if="Math.floor(CartCount) > 0" class="num bg_color">{{
                CartCount
              }}</text>
            </view>
            <view>购物车</view>
          </navigator>
          <view class="bnt acea-row" v-if="attr.productSelect.stock <= 0">
            <form report-submit="true">
              <button
                class="longBnts bg-color-hui"
                form-type="submit"
                :class="
                  productType == ProductTypeEnum.Integral ? 'w-640rpx' : ''
                "
              >
                已售罄
              </button>
            </form>
          </view>
          <view class="bnt acea-row tui-skeleton-rect" v-else>
            <!-- 正常商品 -->
            <block v-if="productType === ProductTypeEnum.Normal">
              <form
                v-show="productInfo.systemFormId == 0"
                @submit="joinCart"
                report-submit="true"
              >
                <button class="joinCart bnts" form-type="submit">
                  加入购物车
                </button>
              </form>
              <form @submit="goBuy" report-submit="true">
                <button
                  :class="productInfo.systemFormId == 0 ? 'bnts' : 'longBnts'"
                  class="buy"
                  form-type="submit"
                >
                  立即购买
                </button>
              </form>
            </block>
            <!-- 积分商品 -->
            <block v-else-if="productType === ProductTypeEnum.Integral">
              <form @submit="goBuy" report-submit="true">
                <button
                  class="longBnts w-640rpx"
                  :class="
                    productPrice.redeemIntegral > integral
                      ? 'bg-color-hui'
                      : 'bg-red'
                  "
                  :disabled="productPrice.redeemIntegral > integral"
                  form-type="submit"
                >
                  立即兑换
                </button>
              </form>
            </block>
            <!-- 虚拟商品 -->
            <view v-else class="bnt bntVideo acea-row">
              <form @submit="goBuy" report-submit="true">
                <button class="buy bg-color longBnts" form-type="submit">
                  立即购买
                </button>
              </form>
            </view>
          </view>
        </block>
        <!-- 除去二级类型是普通商品的售罄按钮 -->
        <view
          v-if="
            (attr.productSelect.stock <= 0 ||
              (attr.productSelect.groupStock <= 0 &&
                marketingType === ProductMarketingTypeEnum.Groupbuying)) &&
            marketingType !== ProductMarketingTypeEnum.Normal
          "
          class="bnt bntVideo acea-row"
        >
          <form report-submit="true">
            <button
              class="longBnts bg-color-hui"
              :class="
                productType === ProductTypeEnum.Integral ? 'w-640rpx' : ''
              "
              form-type="submit"
            >
              已售罄
            </button>
          </form>
        </view>
        <view
          class="bnt acea-row"
          v-if="
            marketingType === ProductMarketingTypeEnum.Groupbuying &&
            attr.productSelect.groupStock > 0 &&
            groupBuyActivityResponse.buyLimitCount == 0
          "
        >
          <form report-submit="true">
            <button class="longBnts bg-color-hui" form-type="submit">
              超出限购数量
            </button>
          </form>
        </view>
        <!-- 秒杀商品 -->
        <view
          v-if="
            seckillStatus !== 1 &&
            marketingType === ProductMarketingTypeEnum.Seckill &&
            attr.productSelect.stock > 0
          "
          class="bnt acea-row"
        >
          <form @submit="goDetail(masterProductId)" report-submit="true">
            <button class="joinCart bnts" form-type="submit">直接购买</button>
          </form>
          <form report-submit="true">
            <button class="bg-color-hui bnts" form-type="submit">
              {{ seckillStatus === 0 ? "活动已结束" : "活动未开始" }}
            </button>
          </form>
        </view>
        <!-- 秒杀商品、视频号商品购买 -->
        <view
          v-if="
            attr.productSelect.stock > 0 &&
            (productType === ProductTypeEnum.Video ||
              (marketingType === ProductMarketingTypeEnum.Seckill &&
                seckillStatus === 1))
          "
          class="bnt bntVideo acea-row"
        >
          <form @submit="goBuy" report-submit="true">
            <button class="buy bg-color longBnts" form-type="submit">
              立即购买
            </button>
          </form>
        </view>
        <!-- 拼团商品单独购买/开团 -->
        <view
          class="bnt acea-row tui-skeleton-rect"
          v-if="
            !(
              marketingType !== ProductMarketingTypeEnum.Groupbuying ||
              attr.productSelect.groupStock <= 0 ||
              (attr.productSelect.groupStock > 0 &&
                groupBuyActivityResponse.buyLimitCount == 0) ||
              attr.productSelect.stock == 0 ||
              groupRecordId != 0
            )
          "
        >
          <form @submit="toAloneBuy" report-submit="true" v-if="productInfo.isShow">
            <button class="joinCart bnts groupJoin" form-type="submit">单独购买</button>
          </form>
          <form @submit="goBuy" report-submit="true">
            <button :class="productInfo.isShow?'group-buy':'group-buy2'" class=" bnts" form-type="submit">立即开团</button>
          </form>
        </view>
        <view
          class="bnt acea-row tui-skeleton-rect"
          v-if="
            groupRecordId != 0 &&
            attr.productSelect.stock > 0 &&
            attr.productSelect.groupStock > 0 &&
            groupBuyActivityResponse.buyLimitCount != 0
          "
        >
          <form @submit="goBuy" report-submit="true">
            <button class="spredGroupStyle" form-type="submit">立即参团</button>
          </form>
        </view>
      </view>

      <!-- 组件 -->
      <productWindow
        :attr="attr"
        :isShow="1"
        :iSplus="1"
        @myevent="onMyEvent"
        @ChangeAttr="ChangeAttr"
        @ChangeCartNum="ChangeCartNum"
        @attrVal="attrVal"
        @iptCartNum="iptCartNum"
        id="product-window"
        @getImg="showImg"
        :productType="productType"
        :marketingType="marketingType"
        :groupBuyActivityResponse="groupBuyActivityResponse"
        @buyLimit="buyLimit"
      >
      </productWindow>
      <couponListWindow
        :coupon="coupon"
        :typeNum="couponDeaultType[0].useType"
        @ChangCouponsClone="ChangCouponsClone"
        @ChangCoupons="ChangCoupons"
        @ChangCouponsUseState="ChangCouponsUseState"
        @tabCouponType="tabCouponType"
      ></couponListWindow>
      <!-- 分享按钮 -->
      <view class="generate-posters" :class="posters ? 'on' : ''">
        <view class="generateCon acea-row row-middle">
          <!-- #ifndef MP -->
          <button
            class="item"
            hover-class="none"
            v-if="weixinStatus === true"
            @click="H5ShareBox = true"
          >
            <view class="pictrue">
              <image src="../static/images/weixin.png"></image>
            </view>
            <view class="">分享给好友</view>
          </button>
          <!-- #endif -->
          <!-- #ifdef MP -->
          <button class="item" open-type="share" hover-class="none">
            <view class="pictrue">
              <image src="../static/images/weixin.png"></image>
            </view>
            <view class="">分享给好友</view>
          </button>
          <!-- #endif -->
          <!-- #ifdef APP-PLUS -->
          <view class="item" @click="appShare('WXSceneSession')">
            <view class="iconfont icon-weixin3"></view>
            <view class="">微信好友</view>
          </view>
          <view class="item" @click="appShare('WXSenceTimeline')">
            <view class="iconfont icon-pengyouquan"></view>
            <view class="">微信朋友圈</view>
          </view>
          <!-- #endif -->
          <!-- #ifdef H5 || MP -->
          <view class="item" @click="getpreviewImage">
            <view class="pictrue">
              <image src="../static/images/changan.png"></image>
            </view>
            <view class="">预览发图</view>
          </view>
          <!-- #endif -->
          <!-- #ifdef MP  -->
          <button class="item" hover-class="none" @click="savePosterPath">
            <view class="pictrue">
              <image src="../static/images/haibao.png"></image>
            </view>
            <view class="">保存海报</view>
          </button>
          <!-- #endif -->
        </view>
        <view
          class="generateClose acea-row row-center-wrapper"
          @click="posterImageClose"
          >取消</view
        >
      </view>
      <!-- 查看规格商品图 -->
      <cus-previewImg
        ref="cusPreviewImg"
        :list="skuArr"
        @changeSwitch="changeSwitch"
        @shareFriend="listenerActionSheet"
      />
      <view class="mask" v-if="posters" @click="closePosters"></view>
      <view class="mask" v-if="canvasStatus"></view>
      <view
        class="mask_transparent"
        v-if="currentPage"
        @touchmove="hideNav"
        @click="hideNav()"
      ></view>
      <!-- 海报展示 -->
      <view class="poster-pop" v-if="canvasStatus">
        <image :src="imagePath"></image>
      </view>
      <view class="canvas" v-else>
        <canvas
          style="width: 750px; height: 1190px"
          canvas-id="firstCanvas"
        ></canvas>
        <canvas
          canvas-id="qrcode"
          :style="{ width: `${qrcodeSize}px`, height: `${qrcodeSize}px` }"
        />
      </view>
      <!-- 发送给朋友图片 -->
      <view class="share-box" v-if="H5ShareBox">
        <image
          :src="urlDomain + 'crmebimage/presets/share-info.png'"
          @click="H5ShareBox = false"
        ></image>
      </view>
      <!-- 保障服务弹窗 -->
      <tui-drawer mode="bottom" :visible="assureDrawer" @close="closeAssure">
        <view class="ensure">
          <view @click="closeAssure" class="title"
            >保障服务<text class="iconfont icon-guanbi5"></text
          ></view>
          <view class="list">
            <view
              class="item acea-row"
              v-for="(item, index) in guaranteeList"
              :key="index"
            >
              <view class="pictrue">
                <!-- <image :src="item.icon"></image> -->
                <text :class="(marketingType === ProductMarketingTypeEnum.Groupbuying||productType === ProductTypeEnum.Integral)?'activityIcon':'iconColor'" class="iconfont icon-gou2"></text>
              </view>
              <view class="text">
                <view class="name">{{ item.name }}</view>
                <view>{{ item.content }}</view>
              </view>
            </view>
          </view>
          <view :class="(marketingType === ProductMarketingTypeEnum.Groupbuying||productType === ProductTypeEnum.Integral)?'activityBtn':'btn'"@click="assureDrawer = false">完成</view>
        </view>
      </tui-drawer>
    </view>
  </view>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import uQRCode from "@/js_sdk/Sansnn-uQRCode/uqrcode.js";
import store from "@/store";
import { HTTP_H5_URL } from "@/config/app.js";
import {
  getProductDetail,
  collectAdd,
  collectCancel,
  postCartAdd,
  getReplyConfig,
  getReplyProduct,
} from "@/api/product.js";
import { getCoupons, tokenIsExistApi } from "@/api/api.js";
import { merCustomerApi } from "@/api/merchant.js";
import { getCartCounts } from "@/api/order.js";
import { toLogin } from "@/libs/login.js";
import { mapGetters } from "vuex";
import { imageBase64 } from "@/api/public";
import productConSwiper from "../components/productConSwiper/index.vue";
import couponListWindow from "../components/getCoponWindow";
import productWindow from "@/components/productWindow";
import userEvaluation from "../components/userEvaluation";
import cusPreviewImg from "../components/cus-previewImg/cus-previewImg.vue";
import merHome from "@/components/merHome/index.vue";
import mpHtml from "../components/mp-html/components/mp-html/mp-html.vue";
import { silenceBindingSpread } from "@/utils";
import parser from "../components/jyf-parser/jyf-parser";
import tuiDrawer from "../components/tui-drawer/index.vue";
import tuiSkeleton from "@/components/base/tui-skeleton.vue";
import easyLoadimage from "@/components/base/easy-loadimage.vue";
import svipPrice from "@/components/svipPrice.vue";
// #ifdef MP
import { base64src } from "@/utils/base64src.js";
import { mpQrcode } from "@/api/api.js";
// #endif
let app = getApp();
import { setThemeColor } from "@/utils/setTheme.js";
import { Debounce } from "@/utils/validate.js";
import { chatConfig } from "@/utils/consumerType.js";
import { goProductDetail } from "@/libs/order.js";
import seckillCard from "./components/seckillCard.vue";
import groupCard from "./components/groupCard.vue";
import groupPlaying from "./components/groupPlaying.vue";
import groupDoing from "./components/groupDoing.vue";
import activityStyle from "./components/activityStyle.vue";
import { onGetPreOrder } from "@/libs/order";
import * as filters from "@/filters";
import {
  ProductMarketingTypeEnum,
  ProductTypeEnum,
} from "@/enums/productEnums";
import useActivity from "@/mixins/useActivity";
let sysHeight = uni.getSystemInfoSync().statusBarHeight;
export default {
  mixins: [useActivity],
  components: {
    productConSwiper,
    couponListWindow,
    productWindow,
    userEvaluation,
    cusPreviewImg,
    merHome,
    "jyf-parser": parser,
    tuiDrawer,
    tuiSkeleton,
    easyLoadimage,
    seckillCard,
    activityStyle,
    svipPrice,
    groupCard,
    groupPlaying,
    groupDoing,
    mpHtml,
  },
  data() {
    let that = this;
    return {
      ProductMarketingTypeEnum: ProductMarketingTypeEnum,
      ProductTypeEnum: ProductTypeEnum,
      urlDomain: this.$Cache.get("imgHost"),
      sysHeight: sysHeight,
      showSkeleton: true, //骨架屏显示隐藏
      isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
      //属性是否打开
      coupon: {
        coupon: false,
        type: 2,
        list: [],
        count: [],
      },
      attrTxt: "请选择", //属性页面提示
      attrValue: "", //已选属性
      animated: false, //购物车动画
      id: 0, //商品id
      replyCount: 0, //总评论数量
      reply: [], //评论列表
      productInfo: {}, //商品详情
      productValue: [], //系统属性
      couponList: [], //优惠券
      cart_num: 1, //购买数量
      isOpen: false, //是否打开属性组件
      actionSheetHidden: true,
      storeImage: "", //海报产品图
      PromotionCode: "", //二维码图片
      posterbackgd: "../static/images/posterbackgd.png",
      pinkbackgd: "../static/images/pink_share.png",
      pinkWhiteBg: "../static/images/whiteBg.png",
      sharePacket: {
        isState: true, //默认不显示
        touchstart: false,
      }, //分销商详细
      circular: false,
      autoplay: false,
      interval: 3000,
      duration: 500,
      clientHeight: "",
      systemStore: {}, //门店信息
      good_list: [],
      replyChance: 0,
      CartCount: 0,
      isDown: true,
      posters: false,
      weixinStatus: false,
      attr: {
        cartAttr: false,
        productAttr: [],
        productSelect: {},
      },
      description: "",
      navActive: 0,
      H5ShareBox: false, //公众号分享图片
      activityH5: [],
      retunTop: true, //顶部返回
      navH: "",
      navList: [],
      opacity: 0,
      scrollY: 0,
      topArr: [],
      height: 0,
      heightArr: [],
      lock: false,
      scrollTop: 0,
      tagStyle: {
        img: "width:100%;display:block;",
        table: "width:100%",
        video: "width:100%",
      },
      sliderImage: [],
      videoLink: "",
      qrcodeSize: 600,
      canvasStatus: false, //是否显示海报
      imagePath: "", //海报路径
      imgTop: "",
      errT: "",
      homeTop: 59,
      navbarRight: 0,
      userCollect: false,
      options: null,
      returnShow: true, //判断顶部返回是否出现
      marketingType: 0, //视频号普通商品营销类型
      theme: app.globalData.theme,
      indicatorBg: "",
      shareStatus: true,
      skuArr: [],
      currentPage: false,
      selectSku: "",
      selectNavList: [
        {
          name: "首页",
          icon: "icon-shouye8",
          url: "/pages/index/index",
          after: "dialog_after",
        },
        {
          name: "搜索",
          icon: "icon-sousuo6",
          url: "/pages/goods/goods_list/index",
          after: "dialog_after",
        },
        {
          name: "购物车",
          icon: "icon-gouwuche7",
          url: "/pages/order_addcart/order_addcart",
          after: "dialog_after",
        },
        {
          name: "我的收藏",
          icon: "icon-shoucang3",
          url: "/pages/goods/user_goods_collection/index",
          after: "dialog_after",
        },
        {
          name: "个人中心",
          icon: "icon-gerenzhongxin1",
          url: "/pages/user/index",
        },
      ],
      defaultCoupon: [],
      couponDeaultType: [
        {
          useType: 1,
        },
      ],
      guaranteeList: [],
      assureDrawer: false,
      merchantInfo: {},
      isShowTypeId: false,
      serviceConfig: {},
      seckillStatus: 0,
      seckillTime: null,
      homeTopApp: 0,
      masterProductId: 0, //活动商品中主商品id
      tokenIsExist: false, //校验token是否有效
      publicLoginType: app.globalData.publicLoginType, //公众号登录方式(单选),1微信授权，2手机号登录
      productType: 0, //商品类型 0=普通商品,1-积分商品,2-虚拟商品,4=视频号,5-云盘商品,6-卡密商品
      //普通价格
      svipPriceStyle: {
        svipBox: {
          height: "34rpx",
          borderRadius: "60rpx 56rpx 56rpx 20rpx",
        },
        icon: {
          fontSize: "23rpx",
          height: "34rpx",
          borderRadius: "16rpx 0 16rpx 2rpx",
        },
        price: {
          fontSize: "44rpx",
        },
        svipPrice: {
          fontSize: "27rpx",
        },
        topStyle: {
          top: "6rpx",
        },
      },
      productPrice: {
        price: "",
        vipPrice: "",
        isPaidMember: false, //是否是付费会员商品
        redeemIntegral: 0,
      },
      //svip价格
      svipIconStyle: {
        svipBox: {
          height: "34rpx",
          borderRadius: "36rpx 40rpx 40rpx 0.4rpx",
        },
        price: {
          fontSize: "44rpx",
        },
        svipPrice: {
          fontSize: "22rpx",
        },
      },
      groupBuyActivityResponse: "",
      groupActivityId: "",
      buyLimitNum: "",
      groupRecordId: 0,
      isPink: 0,
    };
  },
  computed: mapGetters(["isLogin", "uid", "chatUrl", "globalData"]),
  watch: {
    isOpen(nVal) {
      if (!nVal && this.isPink) {
        this.groupRecordId = 0;
      }
    },
  },
  onLoad(options) {
    var pages = getCurrentPages();
    this.returnShow = pages.length === 1 ? false : true;
    //用户从分享卡片进入的场景下获取主题色配置
    this.$set(this, "theme", this.$Cache.get("theme"));

    //页面中需要计算的一些值
    // #ifdef APP-PLUS
    this.homeTopApp = this.sysHeight + 8;
    // #endif
    // #ifdef H5
    this.homeTopApp = 10;
    // #endif
    this.navH = this.globalData.navHeight;
    let that = this;
    uni.getSystemInfo({
      success: function (res) {
        that.height = res.windowHeight;
        //res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度；
        // #ifndef APP-PLUS || H5 || MP-ALIPAY
        that.navbarRight =
          res.windowWidth - uni.getMenuButtonBoundingClientRect().left;
        // #endif
      },
    });

    //判断顶部返回是否出现
    var pages = getCurrentPages();
    this.returnShow = pages.length === 1 ? false : true;
    if (pages.length <= 1) {
      this.retunTop = false;
    }

    //获取浏览器传来的对象
    this.options = options;

    //获取浏览器秒杀状态、秒杀时间
    if (options.status) this.seckillStatus = Number(options.status); //秒杀状态
    if (options.datatime) this.seckillTime = Number(options.datatime); //秒杀时间
    if (options.gd) this.groupActivityId = options.gd; //拼团活动id
    if (options.rd) this.groupRecordId = options.rd; //是否为参团

    //获取浏览器中的参数，商品id，商品类型type，普通normal，秒杀seckill，砍价，拼团，视频号video
    if (!options.scene && !options.id) {
      this.showSkeleton = false;
      this.$util.Tips(
        {
          title: "缺少参数无法查看商品",
        },
        {
          url: "/pages/index/index",
        }
      );
      return;
    }
    if (options.id) this.id = options.id;
    //订单中跳入商品详情，点击进入商品详情获取商品类型
    //marketingType商品类型:0-普通，1-秒杀seckill，2-拼团
    this.marketingType = Number(options.mt);
    // 仅仅小程序扫码进入获取商品id，商品类型
    if (options.scene) {
      let value = this.$util.getUrlParams(decodeURIComponent(options.scene));
      this.id = value.id ? value.id : "";
      this.marketingType = Number(value.mt);
      //this.type = value.type ? value.type : 'normal';
    }

    //商品类型存入vuex中
    this.$store.commit("PRODUCT_TYPE", this.marketingType);

    //商品详情
    this.getGoodsDetails();
    this.indicatorBg = setThemeColor();
  },
  onShow() {
    //校验token是否有效,true为有效，false为无效
    this.getTokenIsExist();
  },
  onReady() {
    this.isNodes++;
    this.$nextTick(function () {
      // #ifdef MP
      const menuButton = uni.getMenuButtonBoundingClientRect();
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#home")
        .boundingClientRect((data) => {
          this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
        })
        .exec();
      // #endif
    });
  },
  // 滚动监听
  onPageScroll(e) {
    // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
    uni.$emit("scroll");
  },
  /**
   * 用户点击右上角分享
   */
  // #ifdef MP
  onShareAppMessage: function (res) {
    let that = this;
    that.$set(that, "actionSheetHidden", !that.actionSheetHidden);
    if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
      return {
        title: that.productInfo.name || "",
        imageUrl: that.productInfo.image || "",
        path: `/pages/goods/goods_details/index?id=${this.id}&mt=${this.marketingType}&gd=${this.groupActivityId}&sd=${that.uid}`,
      };
    } else {
      return {
        title: that.productInfo.name || "",
        imageUrl: that.productInfo.image || "",
        path: `/pages/goods/goods_details/index?id=${that.id}&mt=${this.marketingType}&sd=${that.uid}`,
      };
    }
  },
  // #endif
  methods: {
    //去拼团
    toGroup(e) {
      this.goBuy();
      this.groupRecordId = e;
      this.isPink = 1;
    },
    buyLimit(e) {
      this.buyLimitNum = e;
    },
    //校验token是否有效,true为有效，false为无效
    getTokenIsExist() {
      tokenIsExistApi().then((res) => {
        this.tokenIsExist = res.data;
        if (this.isLogin && this.tokenIsExist) {
          this.getUserIntegral(); //获取我的积分
          this.getCouponList();
          this.getCartCount(true);
        }
        silenceBindingSpread(this.globalData, this.tokenIsExist);
      });
    },
    getMerCustomer(id) {
      merCustomerApi(id).then((res) => {
        this.serviceConfig = res.data;
      });
    },
    closeAssure() {
      this.assureDrawer = false;
    },
    // #ifdef APP-PLUS
    appShare(scene) {
      let that = this;
      let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
      let curRoute = routes[routes.length - 1].$page.fullPath; // 获取当前页面路由，也就是最后一个打开的页面路由
      uni.share({
        provider: "weixin",
        scene: scene,
        type: 0,
        href: `${HTTP_H5_URL}${curRoute}&sd=${that.uid}&mt=${this.marketingType}&gd=${this.groupActivityId}`,
        title: that.productInfo.name,
        summary: that.productInfo.storeInfo,
        imageUrl: that.productInfo.image,
        success: function (res) {
          that.posters = false;
        },
        fail: function (err) {
          uni.showToast({
            title: "分享失败",
            icon: "none",
            duration: 2000,
          });
          that.posters = false;
        },
      });
    },
    // #endif
    kefuClick() {
      if (this.productType === this.ProductTypeEnum.Integral) {
        chatConfig(this.$Cache.getItem("platChatConfig"));
      } else {
        chatConfig(this.serviceConfig);
      }
    },
    goActivity: function (e) {
      let item = e;
      if (item.type === "1") {
        uni.navigateTo({
          url: `/pages/activity/goods_seckill_details/index?id=${item.id}`,
        });
      } else if (item.type === "2") {
        uni.navigateTo({
          url: `/pages/activity/goods_bargain_details/index?id=${item.id}&startBargainUid=${this.uid}`,
        });
      } else {
        uni.navigateTo({
          url: `/pages/activity/goods_combination_details/index?id=${item.id}`,
        });
      }
    },
    /**
     * 购物车手动填写
     *
     */
    iptCartNum: function (e) {
      this.$set(this.attr.productSelect, "cart_num", e);
    },
    // 后退
    returns: function () {
      uni.navigateBack();
    },
    showNav() {
      this.currentPage = !this.currentPage;
    },
    tap: function (index) {
      var id = "past" + index;
      this.$set(this, "navActive", index);
      this.$set(this, "lock", true);
      this.$set(
        this,
        "scrollTop",
        index > 0
          ? this.topArr[index] - this.globalData.navHeight / 2
          : this.topArr[index]
      );
    },
    scroll: function (e) {
      var that = this,
        scrollY = e.detail.scrollTop;
      var opacity = scrollY / 200;
      opacity = opacity > 1 ? 1 : opacity;
      that.$set(that, "opacity", opacity);
      that.$set(that, "scrollY", scrollY);
      if (that.lock) {
        that.$set(that, "lock", false);
        return;
      }
      for (var i = 0; i < that.topArr.length; i++) {
        if (
          scrollY <
          that.topArr[i] - this.globalData.navHeight / 2 + that.heightArr[i]
        ) {
          that.$set(that, "navActive", i);
          break;
        }
      }
      that.$set(that.sharePacket, "touchstart", true); //滑动屏幕时让分享气泡缩回
      uni.$emit("scroll");
    },
    /*
     *去商品详情页
     */
    goDetail(id) {
      goProductDetail(id, 0, "");
    },
    ChangCouponsClone: function () {
      this.$set(this.coupon, "coupon", false);
    },
    /**
     * 购物车数量加和数量减
     *
     */
    ChangeCartNum: function (changeValue, buyLimitNum, type) {
      //changeValue:是否 加|减
      //获取当前变动属性
      let productSelect = this.productValue[this.attrValue];
      //如果没有属性,赋值给商品默认库存
      if (productSelect === undefined && !this.attr.productAttr.length)
        productSelect = this.attr.productSelect;
      //无属性值即库存为0；不存在加减；
      if (productSelect === undefined) return;
      let stock;
      if (type == 2) {
        stock = buyLimitNum || 0;
      } else {
        stock = productSelect.stock || 0;
      }
      let num = this.attr.productSelect;
      if (changeValue) {
        num.cart_num++;
        if (num.cart_num > stock) {
          this.$set(this.attr.productSelect, "cart_num", stock);
          this.$set(this, "cart_num", stock);
        }
      } else {
        num.cart_num--;
        if (num.cart_num < 1) {
          this.$set(this.attr.productSelect, "cart_num", 1);
          this.$set(this, "cart_num", 1);
        }
      }
    },
    attrVal(val) {
      this.$set(
        this.attr.productAttr[val.indexw],
        "index",
        this.attr.productAttr[val.indexw].attrValues[val.indexn]
      );
    },
    checkedAttr(productSelect) {
      this.$set(this.attr.productSelect, "name", this.productInfo.name);
      this.$set(this.attr.productSelect, "image", productSelect.image);
      this.$set(this.attr.productSelect, "price", productSelect.price);
      this.$set(this.attr.productSelect, "stock", productSelect.stock);
      this.$set(this.attr.productSelect, "unique", productSelect.id);
      this.$set(this.attr.productSelect, "cart_num", 1);
      this.$set(this.attr.productSelect, "vipPrice", productSelect.vipPrice);
      this.$set(this.attr.productSelect, "otPrice", productSelect.otPrice);
      this.$set(
        this.attr.productSelect,
        "groupPrice",
        productSelect.groupPrice
      );
      this.$set(
        this.attr.productSelect,
        "groupStock",
        productSelect.groupStock
      );
      this.$set(
        this.attr.productSelect,
        "isPaidMember",
        this.productInfo.isPaidMember
      );
      this.$set(
        this.attr.productSelect,
        "redeemIntegral",
        productSelect.redeemIntegral
      );
      this.$set(this.attr.productSelect, "cost", productSelect.cost);
      this.$set(this, "attrTxt", "已选择");
    },
    // 没有规格选择
    noCheckedAttr() {
      this.$set(this.attr.productSelect, "image", this.productInfo.image);
      this.$set(this.attr.productSelect, "price", this.productInfo.price);
      this.$set(this.attr.productSelect, "stock", 0);
      this.$set(this.attr.productSelect, "unique", this.productInfo.id);
      this.$set(this.attr.productSelect, "cart_num", 1);
      this.$set(this.attr.productSelect, "vipPrice", this.productInfo.vipPrice);
      this.$set(this.attr.productSelect, "otPrice", this.productInfo.otPrice);
      this.$set(
        this.attr.productSelect,
        "isPaidMember",
        this.productInfo.isPaidMember
      );
      this.$set(
        this.attr.productSelect,
        "redeemIntegral",
        this.productInfo.redeemIntegral
      );
      this.$set(this.attr.productSelect, "cost", this.productInfo.cost);
      this.$set(this, "attrValue", "");
      this.$set(this, "attrTxt", "请选择");
    },
    // 当前展示的金额
    getProductPrice() {
      this.productPrice = {
        price: this.attr.productSelect.price,
        vipPrice: this.attr.productSelect.vipPrice,
        isPaidMember: this.productInfo.isPaidMember, //是否是付费会员商品
        redeemIntegral: this.attr.productSelect.redeemIntegral, //积分
      };
    },
    /**
     * 属性变动赋值
     *
     */
    ChangeAttr: function (res) {
      let productSelect = this.productValue[res];
      this.$set(this, "selectSku", productSelect);
      if (productSelect) {
        this.checkedAttr(productSelect);
        this.$set(this, "attrValue", res);
      } else {
        this.noCheckedAttr();
      }
      this.getProductPrice();
    },
    /**
     * 领取完毕移除当前页面领取过的优惠券展示
     */
    ChangCoupons: function (e) {
      let coupon = e;
      let couponList = this.$util.ArrayRemove(this.couponList, "id", coupon.id);
      //	this.$set(this, 'couponList', couponList);
      this.getCouponList();
    },

    setClientHeight: function () {
      let that = this;
      if (!that.good_list.length) return;
      let view = uni.createSelectorQuery().in(this).select("#list0");
      view
        .fields(
          {
            size: true,
          },
          (data) => {
            that.$set(that, "clientHeight", data.height + 20);
          }
        )
        .exec();
    },
    /**
     * 获取产品详情
     *
     */
    getGoodsDetails: function () {
      let that = this;
      //that.id, that.marketingType

      getProductDetail(that.id, that.marketingType, 0, this.groupActivityId)
        .then((res) => {
          let data = res.data;
          let productInfo = data.productInfo;
          // 字符串数组转数组；
          let arrayImg = productInfo.sliderImage;
          let sliderImage = JSON.parse(arrayImg);
          if (that.getFileType(sliderImage[0]) == "video") {
            //判断轮播图第一张是否是视频，如果是，就赋值给videoLink，并且将其在轮播图中删除
            this.$set(this, "videoLink", sliderImage[0]);
            sliderImage.splice(0, 1);
          }
          that.productType = productInfo.type; //商品类型 0=普通商品,1-积分商品,2-虚拟商品,4=视频号,5-云盘商品,6-卡密商品
          that.getSeckillInfo(data); // 秒杀
          that.$set(that, "couponList", data.couponList);
          that.$set(that, "sliderImage", sliderImage);
          that.$set(that, "productInfo", productInfo);
          that.$set(that, "masterProductId", data.masterProductId || 0);
          that.$set(that, "merchantInfo", data.merchantInfo);
          that.$set(that, "description", productInfo.content);
          that.$set(that, "userCollect", data.userCollect);
          that.$set(that.attr, "productAttr", data.productAttr);
          that.$set(that, "productValue", data.productValue);
          that.$set(
            that,
            "guaranteeList",
            data.guaranteeList ? data.guaranteeList : []
          );
          data.groupBuyActivityResponse &&
            that.$set(
              that,
              "groupBuyActivityResponse",
              data.groupBuyActivityResponse
            );
          let navList =
            that.productType !== ProductTypeEnum.Integral
              ? ["商品", "评价", "详情"]
              : ["商品", "详情"];

          this.$set(that, "navList", navList);
          if (productInfo.merId) that.getMerCustomer(productInfo.merId);
          for (let key in data.productValue) {
            let obj = data.productValue[key];
            that.skuArr.push(obj);
          }
          this.$set(this, "selectSku", that.skuArr[0]);
          uni.setNavigationBarTitle({
            title: productInfo.name.substring(0, 7) + "...",
          });

          let productAttr = this.attr.productAttr.map((item) => {
            return {
              attrName: item.attrName,
              attrValues: item.attrValues.split(","),
              id: item.id,
              isDel: item.isDel,
              productId: item.productId,
              type: item.type,
            };
          });
          this.$set(this.attr, "productAttr", productAttr);

          this.getProductReplyList();
          this.getProductReplyCount();
          if (that.isLogin) {
            //#ifdef H5
            that.make(that.uid);
            that.ShareInfo();
            this.getImageBase64(this.productInfo.image);
            // #endif
          }
          // #ifdef MP
          that.getQrcode();
          // #endif
          setTimeout(function () {
            that.infoScroll();
          }, 500);
          // #ifdef MP
          that.imgTop = data.productInfo.image;
          // #endif
          // #ifndef H5
          that.downloadFilestoreImage();
          // #endif
          that.DefaultSelect();
          this.showSkeleton = false;
          setTimeout(() => {
            this.defaultCoupon = this.coupon.list;
          }, 1000);
        })
        .catch((err) => {
          //状态异常返回上级页面
          that.$util.Tips(
            {
              title: err.toString(),
            },
            {
              tab: 3,
              url: 1,
            }
          );
          this.showSkeleton = false;
        });
    },
    // 秒杀
    getSeckillInfo(data) {
      let startTimeStamp = data.startTimeStamp; //秒杀开始结束时间戳
      let endTimeStamp = data.endTimeStamp;
      if (
        !this.options.datatime &&
        this.marketingType === ProductMarketingTypeEnum.Seckill
      ) {
        let data = Date.parse(new Date());
        if (Number(data) < Number(startTimeStamp)) {
          this.seckillTime = Number(startTimeStamp) / 1000;
          this.seckillStatus = 2;
        } else if (Number(data) < Number(endTimeStamp)) {
          this.seckillTime = Number(endTimeStamp) / 1000;
          this.seckillStatus = 1;
        } else {
          this.seckillTime = 0;
          this.seckillStatus = 0;
        }
        // seckillStatus 秒杀状态 0=已结束 1=抢购中 2=即将开始 3=明日预告
      }
    },
    getProductReplyList: function () {
      let id =
        Number(this.masterProductId) > 0 ? this.masterProductId : this.id;
      getReplyProduct(id).then((res) => {
        this.reply = res.data.productReply ? [res.data.productReply] : [];
      });
    },
    getProductReplyCount: function () {
      let that = this;
      let id =
        Number(that.masterProductId) > 0 ? that.masterProductId : that.id;
      getReplyConfig(id).then((res) => {
        that.$set(that, "replyChance", res.data.replyChance);
        that.$set(that, "replyCount", res.data.sumCount);
      });
    },
    infoScroll: function () {
      var that = this,
        topArr = [],
        heightArr = [];
      for (var i = 0; i < that.navList.length; i++) {
        //productList
        //获取元素所在位置
        var query = uni.createSelectorQuery().in(this);
        var idView = "#past" + i;
        query.select(idView).boundingClientRect();
        query.exec(function (res) {
          var top = res[0] ? res[0].top : "";
          var height = res[0] ? res[0].height : "";
          topArr.push(top);
          heightArr.push(height);
          that.$set(that, "topArr", topArr);
          that.$set(that, "heightArr", heightArr);
        });
      }
    },
    /**
     * 默认选中属性
     *
     */
    DefaultSelect: function () {
      let productAttr = this.attr.productAttr;
      let value = [];
      let valueobj = [];
      let num1 = 0;
      let num2 = 0;
      let that = this;
      for (let key in this.productValue) {
        num1++;
        if (
          this.marketingType !== ProductMarketingTypeEnum.Groupbuying &&
          this.productValue[key].stock > 0
        ) {
          valueobj = this.attr.productAttr.length ? key.split(",") : [];
          // 处理已售罄时默认选中第一个
          if (!valueobj.length && this.attr.productAttr.length) {
            value = Object.keys(this.productValue)[0].split(',');
          } else {
            value = valueobj;
          }
          break;
        }

        if (
          this.marketingType === ProductMarketingTypeEnum.Groupbuying &&
          this.productValue[key].groupStock > 0 &&
          this.productValue[key].stock > 0
        ) {
          num2++;
          if (num2 == 1) {
            that.$set(that, "selectSku", that.skuArr[num1 - 1]);
          }
          valueobj = this.attr.productAttr.length ? key.split(",") : [];
          // 处理已售罄时默认选中第一个
          if (!valueobj.length && this.attr.productAttr.length) {
            value = Object.keys(this.productValue)[0].split(',');
          } else {
            value = valueobj;
          }
          break;
        }
      }
      for (let i = 0; i < value.length; i++) {
        this.$set(productAttr[i], "index", value[i]);
      }
      //sort();排序函数:数字-英文-汉字；
      let productSelect = this.productValue[value.join(",")];
      if (productSelect && productAttr.length) {
        this.checkedAttr(productSelect);
        this.$set(this, "attrValue", value.join(","));
        this.$set(this, "attrTxt", "已选择");
      } else if (!productSelect && productAttr.length) {
        this.noCheckedAttr();
      } else if (!productSelect && !productAttr.length) {
        this.noCheckedAttr();
      }
      this.getProductPrice();
    },
    /**
     * 获取优惠券
     *
     */
    getCouponList() {
      let that = this,
        obj = {
          page: 1,
          limit: 20,
          productId: that.id,
          category: 0,
        };
      getCoupons(obj).then((res) => {
        that.$set(that.coupon, "list", res.data.list);
      });
    },
    async getCouponType() {
      //在onLoad只调用一次，获取默认的类型作为打开优惠券列表的参数，不会随着切换变化
      let dataList = await getCoupons({
        productId: this.id,
      });
      if (dataList.length) {
        this.couponDeaultType = dataList.data;
        this.$set(this.coupon, "type", dataList);
      }
    },
    tabCouponType(type) {
      this.$set(this.coupon, "type", type);
      this.getCouponList();
    },

    ChangCouponsUseState(index) {
      let that = this;
      that.coupon.list[index].isUse = true;
      that.$set(that.coupon, "list", that.coupon.list);
      that.$set(that.coupon, "coupon", false);
    },
    /**
     *
     *
     * 收藏商品
     */
    setCollect: Debounce(function () {
      let that = this;
      if (this.isLogin === false) {
        toLogin("isLogin");
      } else {
        let id =
          Number(this.masterProductId) > 0
            ? this.masterProductId
            : this.productInfo.id;
        if (this.userCollect) {
          collectCancel({
            ids: id,
          }).then((res) => {
            that.$set(that, "userCollect", !that.userCollect);
            that.$util.Tips({
              title: "取消收藏",
            });
          });
        } else {
          collectAdd(id).then((res) => {
            that.$set(that, "userCollect", !that.userCollect);
            that.$util.Tips({
              title: "收藏成功",
            });
          });
        }
      }
    }),
    /**
     * 打开属性插件
     */
    selecAttr: function () {
      this.$set(this.attr, "cartAttr", true);
      this.$set(this, "isOpen", true);
      this.attr.productSelect.cart_num = 1;
    },
    /**
     * 打开优惠券插件
     */
    couponTap: function () {
      let that = this;
      if (that.isLogin === false) {
        toLogin();
      } else {
        that.getCouponList(); //打开弹框默认请求商品券
        that.$set(that.coupon, "coupon", true);
      }
    },
    onMyEvent: function () {
      this.$set(this.attr, "cartAttr", false);
      this.$set(this, "isOpen", false);
      this.attr.productSelect.cart_num = 1;
    },
    /**
     * 打开属性加入购物车
     *
     */
    joinCart: Debounce(function (e) {
      //是否登录
      if (this.isLogin === false) {
        toLogin();
      } else {
        this.goCat(1);
      }
    }),
    /*
     * 加入购物车
     */
    goCat: function (num) {
      let that = this,
        productSelect = that.productValue[this.attrValue];
      //打开属性
      if (that.attrValue) {
        //默认选中了属性，但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
        that.attr.cartAttr = !that.isOpen ? true : false;
      } else {
        if (that.isOpen) that.attr.cartAttr = true;
        else that.attr.cartAttr = !that.attr.cartAttr;
      }
      //只有关闭属性弹窗时进行加入购物车
      if (that.attr.cartAttr === true && that.isOpen === false)
        return (that.isOpen = true);
      //如果有属性,没有选择,提示用户选择
      if (
        that.attr.productAttr.length &&
        productSelect.stock === 0 &&
        that.isOpen === true
      )
        return that.$util.Tips({
          title: "产品库存不足，请选择其它",
        });
      if (num === 1) {
        let q = {
          productId: parseFloat(that.id),
          cartNum: parseFloat(that.attr.productSelect.cart_num),
          isNew: false,
          productAttrUnique:
            that.attr.productSelect !== undefined
              ? that.attr.productSelect.unique
              : that.productInfo.id,
        };
        postCartAdd(q)
          .then(function (res) {
            that.isOpen = false;
            that.attr.cartAttr = false;
            that.$util.Tips({
              title: "添加购物车成功",
              success: () => {
                that.getCartCount(true);
              },
            });
          })
          .catch((res) => {
            that.isOpen = false;
            return that.$util.Tips({
              title: res,
            });
          });
      } else {
        this.getPreOrder();
      }
    },
    /**
     * 获取购物车数量
     * @param boolean 是否展示购物车动画和重置属性
     */
    getCartCount: function (isAnima) {
      let that = this;
      getCartCounts(true, "total")
        .then((res) => {
          that.CartCount = res.data.count;
          //加入购物车后重置属性
          if (isAnima) {
            that.animated = true;
            setTimeout(function () {
              that.animated = false;
            }, 500);
          }
        })
        .catch((err) => {
          that.CartCount = 0;
        });
    },
    /**
     * 立即购买
     */
    goBuy: Debounce(function (e) {
      if (this.isLogin === false) {
        toLogin();
      } else {
        this.goCat(0);
      }
    }),
    /**
     * 预下单
     */
    getPreOrder: function () {
      if (
        this.marketingType === ProductMarketingTypeEnum.Groupbuying &&
        this.attr.productSelect.cart_num > this.buyLimitNum
      ) {
        this.isOpen = false;
        return this.$util.Tips({
          title: "超出限购数量",
        });
      }
      if (this.attr.productSelect.cart_num < 1) {
        uni.showToast({
          title: "单次可购买商品数量范围为 1~99",
          icon: "none",
        });
      } else {
        let types = "";
        switch (this.marketingType) {
          case ProductMarketingTypeEnum.Normal:
            if (this.productType === 4) {
              types = "video";
            } else {
              types = "buyNow";
            }
            break;
          case ProductMarketingTypeEnum.Seckill:
            types = "seckill";
            break;
          case ProductMarketingTypeEnum.Groupbuying:
            types = "group";
            break;
        }
        onGetPreOrder(types, [
          {
            attrValueId: parseFloat(this.attr.productSelect.unique),
            productId: parseFloat(this.id),
            productNum: parseFloat(this.attr.productSelect.cart_num),
            groupBuyActivityId: parseFloat(this.groupActivityId),
            groupBuyRecordId: this.groupRecordId,
          },
        ]);
      }
      this.isOpen = false;
    },
    /**
     * 分享打开
     *
     */
    listenerActionSheet: function () {
      this.goPoster();
      this.posters = true;
      // #ifdef H5
      if (!this.isLogin) {
        toLogin();
      } else {
        if (this.$wechat.isWeixin()) {
          this.weixinStatus = true;
        }
      }
      // #endif
    },
    closePosters: function () {
      this.posters = false;
      this.currentPage = false;
    },
    //隐藏海报
    posterImageClose: function () {
      this.canvasStatus = false;
      this.posters = false;
    },
    //替换安全域名
    setDomain: function (url) {
      url = url ? url.toString() : "";
      //本地调试打开,生产请注销
      if (url.indexOf("https://") > -1) return url;
      else return url.replace("http://", "https://");
    },
    //获取海报产品图（解决跨域问题，只适用于小程序）
    downloadFilestoreImage: function () {
      let that = this;
      uni.downloadFile({
        url: that.setDomain(that.productInfo.image),
        success: function (res) {
          that.storeImage = res.tempFilePath;
        },
        fail: function () {
          return that.$util.Tips({
            title: "",
          });
          that.storeImage = "";
        },
      });
    },
    // 小程序关闭分享弹窗；
    goFriend: function () {
      this.posters = false;
    },
    // 小程序二维码
    getQrcode() {
      let that = this;
      let data;
      if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
        data = {
          scene:
            "id=" +
            this.id +
            "&sd=" +
            that.uid +
            "&mt=" +
            2 +
            "&gd=" +
            this.groupActivityId,
          page: "pages/goods/goods_details/index",
        };
      } else {
        data = {
          scene:
            "id=" + this.id + "&sd=" + that.uid + "&mt=" + that.marketingType,
          page: "pages/goods/goods_details/index",
        };
      }
      mpQrcode(data)
        .then((res) => {
          base64src(res.data.code, Date.now(), (res) => {
            that.PromotionCode = res;
          });
        })
        .catch((err) => {
          that.errT = err;
        });
    },
    // 生成二维码；
    make(uid) {
      let href;
      if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
        href =
          location.href.split("?")[0] +
          "?id=" +
          this.id +
          "&sd=" +
          this.uid +
          "&mt=" +
          this.marketingType +
          "&gd=" +
          this.groupActivityId;
      } else {
        href =
          location.href.split("?")[0] +
          "?id=" +
          this.id +
          "&sd=" +
          this.uid +
          "&mt=" +
          this.marketingType;
      }
      uQRCode.make({
        canvasId: "qrcode",
        text: href,
        size: this.qrcodeSize,
        margin: 10,
        success: (res) => {
          this.PromotionCode = res;
        },
        complete: () => {},
        fail: (res) => {
          this.$util.Tips({
            title: "海报二维码生成失败！",
          });
        },
      });
    },
    getImageBase64: function (images) {
      let that = this;
      imageBase64({
        url: images,
      }).then((res) => {
        that.imgTop = res.data.code;
      });
    },
    /**
     * 获取产品分销二维码
     * @param function successFn 下载完成回调
     *
     */
    downloadFilePromotionCode: function (successFn) {
      let that = this;
      getProductCode(that.id)
        .then((res) => {
          uni.downloadFile({
            url: that.setDomain(res.data.code),
            success: function (res) {
              that.$set(that, "isDown", false);
              if (typeof successFn == "function") {
                successFn && successFn(res.tempFilePath);
              } else {
                that.$set(that, "PromotionCode", res.tempFilePath);
              }
            },
            fail: function () {
              that.$set(that, "isDown", false);
              that.$set(that, "PromotionCode", "");
            },
          });
        })
        .catch((err) => {
          that.$set(that, "isDown", false);
          that.$set(that, "PromotionCode", "");
        });
    },
    /**
     * 生成海报
     */
    goPoster: function () {
      let that = this;
      uni.showLoading({
        title: "海报生成中",
        mask: true,
      });
      that.posters = false;
      let arrImagesUrl = "";
      let arrImagesUrlTop = "";
      if (!that.PromotionCode) {
        uni.hideLoading();
        that.$util.Tips({
          title: that.errT,
        });
        return;
      }
      setTimeout(() => {
        if (!that.imgTop) {
          uni.hideLoading();
          that.$util.Tips({
            title: "无法生成商品海报！",
          });
          return;
        }
      }, 1000);
      uni.downloadFile({
        url: that.imgTop, //仅为示例，并非真实的资源
        success: (res) => {
          arrImagesUrlTop = res.tempFilePath;
          let arrImages = [
            that.posterbackgd,
            arrImagesUrlTop,
            that.PromotionCode,
          ];
          let name = that.productInfo.name;
          let price;
          let otPrice;
          if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
            price = that.groupBuyActivityResponse.activePrice;
            otPrice = that.productInfo.price;
          } else {
            price = that.productInfo.price;
            otPrice = that.productType === that.ProductTypeEnum.Integral ? that.productInfo.cost:that.productInfo.otPrice;
          }
          setTimeout(() => {
            that.$util.PosterCanvas(
              arrImages,
              name,
              price,
              otPrice,
              function (tempFilePath) {
                that.imagePath = tempFilePath;
                that.canvasStatus = true;
                uni.hideLoading();
              }
            );
          }, 500);
        },
      });
    },
    // 图片预览；
    getpreviewImage: function () {
      if (this.imagePath) {
        let photoList = [];
        photoList.push(this.imagePath);
        uni.previewImage({
          urls: photoList,
          current: this.imagePath,
        });
      } else {
        this.$util.Tips({
          title: "您的海报尚未生成",
        });
      }
    },
    /*
     * 保存到手机相册
     */
    // #ifdef MP
    savePosterPath: function () {
      let that = this;
      uni.getSetting({
        success(res) {
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            uni.authorize({
              scope: "scope.writePhotosAlbum",
              success() {
                uni.saveImageToPhotosAlbum({
                  filePath: that.imagePath,
                  success: function (res) {
                    that.posterImageClose();
                    that.$util.Tips({
                      title: "保存成功",
                      icon: "success",
                    });
                  },
                  fail: function (res) {
                    that.$util.Tips({
                      title: "保存失败",
                    });
                  },
                });
              },
            });
          } else {
            uni.saveImageToPhotosAlbum({
              filePath: that.imagePath,
              success: function (res) {
                that.posterImageClose();
                that.$util.Tips({
                  title: "保存成功",
                  icon: "success",
                });
              },
              fail: function (res) {
                that.$util.Tips({
                  title: "保存失败",
                });
              },
            });
          }
        },
      });
    },
    // #endif
    ShareInfo() {
      let data = this.productInfo;
      let href = location.href;
      if (this.$wechat.isWeixin() && this.publicLoginType == 1) {
        if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
          href =
            href.split("?")[0] +
            "?id=" +
            this.id +
            "&sd=" +
            this.uid +
            "&mt=" +
            this.marketingType +
            "&gd=" +
            this.groupActivityId;
        } else {
          href =
            href.indexOf("?") === -1
              ? href + "?sd=" + this.uid
              : href + "&sd=" + this.uid + "&mt=" + this.marketingType;
        }
        let configAppMessage = {
          desc: data.storeInfo,
          title: data.name,
          link: href,
          imgUrl: data.image,
        };
        this.$wechat
          .wechatEvevt(
            [
              "updateAppMessageShareData",
              "updateTimelineShareData",
              "onMenuShareAppMessage",
              "onMenuShareTimeline",
            ],
            configAppMessage
          )
          .then((res) => {})
          .catch((err) => {
            console.log(err);
          });
      }
    },
    showShare(status) {
      let that = this;
      that.$set(that.sharePacket, "touchstart", status);
    },
    hideNav() {
      this.currentPage = false;
    },
    //下拉导航页面跳转
    linkPage(url) {
      if (
        [
          "/pages/index/index",
          "/pages/order_addcart/order_addcart",
          "/pages/user/index",
          "/pages/discover_index/index",
        ].indexOf(url) > -1
      ) {
        uni.switchTab({
          url,
        });
      } else {
        uni.navigateTo({
          url,
        });
      }
      this.currentPage = false;
    },
    //点击sku图片打开轮播图
    showImg(index) {
      if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
        this.$refs.cusPreviewImg.open(this.selectSku.sku, 1);
      } else {
        this.$refs.cusPreviewImg.open(this.selectSku.sku, 0);
      }
    },
    //滑动轮播图选择商品
    changeSwitch(e) {
      let productSelect = this.skuArr[e];
      this.$set(this, "selectSku", productSelect);
      var skuList = productSelect.sku.split(",");
      skuList.forEach((i, index) => {
        this.$set(this.attr.productAttr[index], "index", skuList[index]);
      });
      if (productSelect) {
		  this.checkedAttr(productSelect)
		  this.$set(this, "attrValue", productSelect.sku);
		  this.getProductPrice();
      }
    },
    getFileType(fileName) {
      // 后缀获取
      let suffix = "";
      // 获取类型结果
      let result = "";
      try {
        const flieArr = fileName.split(".");
        suffix = flieArr[flieArr.length - 1];
      } catch (err) {
        suffix = "";
      }
      // fileName无后缀返回 false
      if (!suffix) {
        return false;
      }
      suffix = suffix.toLocaleLowerCase();
      // 图片格式
      const imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
      // 进行图片匹配
      result = imglist.find((item) => item === suffix);
      if (result) {
        return "image";
      }
      // 匹配 视频
      const videolist = [
        "mp4",
        "m2v",
        "mkv",
        "rmvb",
        "wmv",
        "avi",
        "flv",
        "mov",
        "m4v",
      ];
      result = videolist.find((item) => item === suffix);
      if (result) {
        return "video";
      }
      // 其他 文件类型
      return "other";
    },
    //直接购买
    toAloneBuy() {
      goProductDetail(this.productInfo.id, 0, "");
    },
    videoPause() {},
  },
};
</script>

<style scoped lang="scss">
.w-640rpx {
  width: 640rpx !important;
}
.icon-fanhui2,
.icon-shouye7 {
  font-size: 30rpx !important;
}

.mb10 {
  margin-bottom: 10rpx;
}

.coupon_label {
  height: 34rpx;
  line-height: 32rpx;
  border-radius: 4rpx;
  padding: 0 10rpx;
  font-size: 22rpx;
  margin-right: 10rpx;
  @include main_color(theme);
  @include cate-two-btn(theme);
}

.coupon_more {
  font-size: 22rpx;
  @include main_color(theme);

  .iconfont {
    font-size: 24rpx;
  }
}

.longBnts {
  width: 444rpx;
  text-align: center;
  line-height: 76rpx;
  color: #fff;
  font-size: 28rpx;
  display: inline-block;
  border-radius: 50rpx !important;
}

.mtop {
  margin-top: -162rpx;
}

.lineWidth {
  width: 588rpx;
}

.superior {
  /deep/.name,
  /deep/.icon-jiantou {
    color: #333 !important;
  }

  /deep/.store {
    padding: 0 !important;
  }

  /deep/image,
  .easy-loadimage,
  image,
  uni-image {
    width: 86rpx;
    height: 86rpx;
    border-radius: 6px;
    opacity: 1;
  }
}

.product-con {
  height: 100%;
}

.ensure {
  width: 100%;
  background-color: #fff;
  padding-bottom: 22rpx;
  padding-bottom: calc(
    22rpx+ constant(safe-area-inset-bottom)
  ); ///兼容 IOS<11.2/
  padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

  .title {
    font-size: 32rpx;
    color: #282828;
    text-align: center;
    margin: 38rpx 0 36rpx 0;
    position: relative;

    .iconfont {
      position: absolute;
      right: 30rpx;
      top: 0;
      font-size: 36rpx;
    }
  }

  .list {
    height: 750rpx;
    margin: 0 30rpx;
    overflow-x: hidden;
    overflow-y: auto;

    .item {
      margin-bottom: 52rpx;

      .pictrue {
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        margin-right: 30rpx;

        /deep/image,
        .easy-loadimage,
        image,
        uni-image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .text {
        width: 618rpx;
        color: #999999;
        font-size: 28rpx;

        .name {
          color: #333333;
          font-weight: bold;
          margin-bottom: 20rpx;
        }
      }
    }
  }

  .bnt,.activityBtn {
    width: 690rpx;
    height: 86rpx;
    text-align: center;
    line-height: 86rpx;
    border-radius: 43rpx;
    font-size: 30rpx;
    color: #fff;
    margin: 0 auto;
  }
  .bnt{
	@include main_bg_color(theme);
  }
  .activityBtn{
	  background: #e93323;
  }
}

.ensure.on {
  transform: translate3d(0, 0, 0);
}

/deep/ .tui-drawer-container_bottom {
  border-radius: 16rpx 16rpx 0 0;
}

.product-con {
  height: 100%;
}

.x-money {
  font-size: 40rpx;
  @include price_color(theme);
}

.bg-color-hui {
  background: #bbb !important;
  border-radius: 0 25px 25px 0;
}

.lang {
  width: 170rpx !important;
  height: 60rpx !important;
  border-radius: 33rpx;
}

.circle {
  width: 58rpx !important;
  height: 58rpx !important;
  border-radius: 50%;
}

.select_nav {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.07);
  color: #000;
  position: fixed;
  font-size: 18px;
  line-height: 62rpx;
  z-index: 1000;
  left: 14rpx;
}

.px-20 {
  padding: 0 20rpx 0;
}

.nav_line {
  content: "";
  display: inline-block;
  width: 1px;
  height: 34rpx;
  background: #b3b3b3;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.bgwhite {
  background: #fff;
}

.input {
  display: flex;
  align-items: center;
  /* #ifdef MP */
  width: 300rpx;
  /* #endif */
  /* #ifndef MP */
  width: 460rpx;
  /* #endif */
  height: 58rpx;
  padding: 0 0 0 30rpx;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 33rpx;
  color: #666;
  font-size: 26rpx;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  background: rgba(255, 255, 255, 0.3);

  .iconfont {
    margin-right: 20rpx;
    font-size: 26rpx;
    color: #666666;
  }
}

.container_detail {
  /* #ifdef MP */
  margin-top: 32rpx;
  /* #endif */
}

.tab_nav {
  width: 100%;
  height: 48px;
  /* #ifdef MP */
  margin-left: 220rpx;
  /* #endif */
}

.right_select {
  width: 50rpx;
  height: 50rpx;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  position: fixed;
  right: 20rpx;
  text-align: center;
  line-height: 50rpx;
}

.dialog_nav {
  position: absolute;
  /* #ifdef MP */
  left: 14rpx;
  /* #endif */
  /* #ifdef H5 || APP-PLUS*/
  right: 14rpx;
  /* #endif */
  width: 240rpx;
  background: #ffffff;
  box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.08);
  z-index: 310;
  border-radius: 14rpx;

  &::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    /* #ifdef MP */
    left: 0;
    right: 0;
    margin: auto;
    /* #endif */
    /* #ifdef H5 || APP-PLUS */
    right: 8px;
    /* #endif */
    top: -9px;
    border-bottom: 10px solid #f5f5f5;
    border-left: 10px solid transparent;
    /*transparent 表示透明*/
    border-right: 10px solid transparent;
  }
}

.dialog_nav_item {
  width: 100%;
  height: 84rpx;
  line-height: 84rpx;
  padding: 0 20rpx 0;
  box-sizing: border-box;
  border-bottom: #eee;
  font-size: 28rpx;
  color: #333;
  position: relative;

  .iconfont {
    font-size: 32rpx;
  }
}

.dialog_after {
  ::after {
    content: "";
    position: absolute;
    width: 172rpx;
    height: 1px;
    background-color: #eeeeee;
    bottom: 0;
    right: 0;
  }
}

.pl-20 {
  padding-left: 20rpx;
}

.activity {
  padding: 0 20rpx;
  @include coupons_border_color(theme);
  @include main_color(theme);
  font-size: 24rpx;
  line-height: 32rpx;
  position: relative;
  margin-left: 4rpx;
}

.product-con .wrapper .coupon .activity:before {
  content: " ";
  position: absolute;
  width: 7rpx;
  height: 10rpx;
  border-radius: 0 7rpx 7rpx 0;
  @include coupons_border_color(theme);
  background-color: #fff !important;
  bottom: 50%;
  left: -3rpx;
  margin-bottom: -6rpx;
  @include white_left_border;
}

.product-con .wrapper .coupon .activity:after {
  content: " ";
  position: absolute;
  width: 7rpx;
  height: 10rpx;
  border-radius: 7rpx 0 0 7rpx;
  @include coupons_border_color(theme);
  background-color: #fff;
  right: -3rpx;
  bottom: 50%;
  margin-bottom: -6rpx;
  @include white_right_border;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.align-baseline {
  align-items: baseline;
}

.bg_color {
  @include main_bg_color(theme);
}

.vip_icon {
  width: 44rpx;
  height: 28rpx;
}

.pl-2 {
  padding-left: 20rpx;
}

.vip_money {
  background: #ffe7b9;
  border-radius: 4px;
  font-size: 22rpx;
  color: #333;
  line-height: 28rpx;
  text-align: center;
  padding: 0 6rpx;
  box-sizing: border-box;
  margin-left: -4rpx;
}

.theme_price {
  @include price_color(theme);
  margin-top: 5rpx;
}

.activityName {
  line-height: 44rpx;
}

.userEvaluation {
  i {
    display: inline-block;
  }
}

.bntVideo {
  width: auto !important;

  .buy {
    border-radius: 50rpx !important;
  }
}

.attribute {
  .line1 {
    width: 600rpx;
  }
}

.chat-btn {
  background-color: antiquewhite !important;
}

.activity_pin {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  @include linear-gradient(theme);
  opacity: 1;
  border-radius: 22rpx;
  padding: 0 15rpx;
}

.activity_miao {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 15rpx;
  // background: linear-gradient(90deg, rgba(250, 102, 24, 1) 0%, rgba(254, 161, 15, 1) 100%);
  @include linear-gradient(theme);
  opacity: 1;
  border-radius: 22rpx;
  margin-left: 19rpx;
}

.iconfonts {
  color: #fff !important;
  font-size: 28rpx;
}

.activity_title {
  font-size: 24rpx;
  color: #fff;
}

.activity_kan {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 15rpx;
  @include linear-gradient(theme);
  opacity: 1;
  border-radius: 22rpx;
  margin-left: 19rpx;
}

.mask {
  z-index: 300 !important;
}

.head-bar {
  background: #fff;
}

.generate-posters {
  width: 100%;
  height: 318rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 388;
  transform: translate3d(0, 100%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  border-top: 1rpx solid #eee;

  .generateCon {
    height: 220rpx;
  }

  .generateClose {
    height: 98rpx;
    font-size: 28rpx;
    color: #333333;
    border-top: 1px solid #eee;
  }

  .item {
    .pictrue {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
      margin: 0 auto 6rpx auto;

      /deep/image,
      .easy-loadimage,
      image,
      uni-image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
}

.generate-posters.on {
  transform: translate3d(0, 0, 0);
}

.generate-posters .item {
  flex: 1;
  text-align: center;
  font-size: 30rpx;
}

.generate-posters .item .iconfont {
  font-size: 80rpx;
  color: #5eae72;
}

.generate-posters .item .iconfont.icon-haibao {
  color: #5391f1;
}

.generate-posters .item .iconfont.icon-haowuquan1 {
  color: #ff954d;
}

.product-con .footer {
  padding: 0 20rpx 0 30rpx;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 277;
  border-top: 1rpx solid #f0f0f0;
  height: 100rpx;
  height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
}

.product-con .footer .item {
  font-size: 18rpx;
  color: #666;
}

.product-con .footer .item .iconfont {
  text-align: center;
  font-size: 40rpx;
}

.product-con .footer .item .iconfont.color-change {
  @include main_color(theme);
}
.product-con .footer .item .iconfont.color-normal {
  color: #e93323;
}
.product-con .footer .item .iconfont.icon-gouwuche1 {
  font-size: 40rpx;
  position: relative;
}

.product-con .footer .item .iconfont.icon-gouwuche1 .num {
  color: #fff;
  position: absolute;
  font-size: 18rpx;
  padding: 2rpx 8rpx 3rpx;
  border-radius: 200rpx;
  top: -10rpx;
  right: -10rpx;
}

.product-con .footer .bnt {
  height: 76rpx;
}

.product-con .footer .bnt .bnts {
  width: 222rpx;
  text-align: center;
  line-height: 76rpx;
  color: #fff;
  font-size: 28rpx;
}

.product-con .footer .bnt .joinCart {
  border-radius: 50rpx 0 0 50rpx;
  @include left_color(theme);
}
.product-con .footer .bnt .joinCart.groupJoin{
	background-color: #FE960F !important;
}
.product-con .footer .bnt .buy {
  border-radius: 0 50rpx 50rpx 0;
  @include main_bg_color(theme);
}

.product-con .store-info {
  margin-top: 20rpx;
  background-color: #fff;
}

.product-con .store-info .title {
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #282828;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1px solid #f5f5f5;
}

.product-con .store-info .info {
  padding: 0 30rpx;
  height: 126rpx;
}

.product-con .store-info .info .picTxt {
  width: 615rpx;
}

.product-con .store-info .info .picTxt .pictrue {
  width: 76rpx;
  height: 76rpx;
}

.product-con .store-info .info .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
}

.product-con .store-info .info .picTxt .text {
  width: 522rpx;
}

.product-con .store-info .info .picTxt .text .name {
  font-size: 30rpx;
  color: #282828;
}

.product-con .store-info .info .picTxt .text .address {
  font-size: 24rpx;
  color: #666;
  margin-top: 3rpx;
}

.product-con .store-info .info .picTxt .text .address .iconfont {
  color: #707070;
  font-size: 18rpx;
  margin-left: 10rpx;
}

.product-con .store-info .info .picTxt .text .address .addressTxt {
  max-width: 480rpx;
}

.product-con .store-info .info .iconfont {
  font-size: 40rpx;
}

.product-con .superior {
  background-color: #fff;
  margin-top: 20rpx;
  padding: 24rpx;

  .title {
    height: 98rpx;

    image {
      width: 20rpx;
      height: 20rpx;
    }

    .titleTxt {
      margin: 0 10rpx;
      font-size: 30rpx;
      color: #333333;
    }
  }

  .slider-banner {
    width: 100%;
    margin: 0 auto;
    position: relative;

    .list {
      width: 100%;

      .item {
        width: 204rpx;
        margin: 24rpx 3.2% 0 0;
        font-size: 26rpx;

        .pictrue {
          position: relative;
          width: 204rpx;
          height: 204rpx;
          border-radius: 6rpx;
          overflow: hidden;

          /deep/image,
          .easy-loadimage,
          image,
          uni-image {
            width: 100% !important;
            height: 100% !important;
            border-radius: 6rpx;
          }
        }

        .name {
          color: #282828;
          margin-top: 10rpx;
        }
      }

      .item:nth-of-type(3n) {
        margin-right: 0;
      }
    }
  }
}

button {
  padding: 0;
  margin: 0;
  line-height: normal;
  background-color: #fff;
}

button::after {
  border: 0;
}

action-sheet-item {
  padding: 0;
  height: 240rpx;
  align-items: center;
  display: flex;
}

.contact {
  font-size: 16px;
  width: 50%;
  background-color: #fff;
  padding: 8rpx 0;
  border-radius: 0;
  margin: 0;
  line-height: 2;
}

.contact::after {
  border: none;
}

.action-sheet {
  font-size: 17px;
  line-height: 1.8;
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
  padding: 25rpx 0;
}

.canvas {
  position: fixed;
  z-index: -5;
  opacity: 0;
}

.poster-pop {
  position: fixed;
  width: 500rpx;
  height: 714rpx;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -432rpx;
  z-index: 399;
  // background-image: url('https://api.admin.merchant.crmeb.xbdzz.cn/crmebimage/public/product/2024/08/13/8a25e3c98d864299b7a5201f70ea24edkoj7sce8za.png');
  // background-size: cover;
}

.poster-pop image {
  width: 100%;
  height: 100%;
  display: block;
}

.poster-pop .close {
  width: 46rpx;
  height: 75rpx;
  position: fixed;
  right: 0;
  top: -73rpx;
  display: block;
}

.poster-pop .save-poster {
  background-color: #df2d0a;
  font-size: ：22rpx;
  color: #fff;
  text-align: center;
  height: 76rpx;
  line-height: 76rpx;
  width: 100%;
}

.poster-pop .keep {
  color: #fff;
  text-align: center;
  font-size: 25rpx;
  margin-top: 10rpx;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.pro-wrapper .iconn {
  background-image: url("");
  width: 100rpx;
  height: 100rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
}

.pro-wrapper .iconn.iconn1 {
  background-image: url("");
}

.pictrue_log {
  width: 80upx;
  height: 40upx;
  border-radius: 10upx 0 12upx 0;
  line-height: 40upx;
  font-size: 24upx;
}

.pictrue_log_class {
  z-index: 3;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(246, 122, 56, 1)),
    to(rgba(241, 27, 9, 1))
  );
  background: linear-gradient(
    90deg,
    rgba(246, 122, 56, 1) 0%,
    rgba(241, 27, 9, 1) 100%
  );
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  text-align: center;
}

.tab_nav .header {
  /* #ifdef H5 || APP-PLUS */
  width: 77%;
  justify-content: space-around;
  /* #endif */
  /* #ifdef MP */
  width: 100%;
  /* #endif */
  height: 96rpx;
  font-size: 28rpx;
  color: #050505;
  margin: auto;
  background-color: #fff;
}

.navbar .header .item {
  position: relative;
  margin: 0 25rpx;
}

.navbar .header .item.on:before {
  position: absolute;
  width: 60rpx;
  height: 5rpx;
  background-repeat: no-repeat;
  content: "";
  @include linear-gradient(theme);
  bottom: -10rpx;
  left: 50%;
  margin-left: -28rpx;
}

.navbar {
  position: fixed;
  // background-color: #fff;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
}

.navbar .navbarH {
  position: relative;
  width: 100%;
}

.navbar .navbarH .navbarCon {
  position: absolute;
  bottom: 0;
  height: 100rpx;
  width: 100%;
}

.h5_back {
  color: #000;
  position: fixed;
  left: 20rpx;
  font-size: 26rpx;
  text-align: center;
  width: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

.share-box {
  z-index: 1000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  image {
    width: 100%;
    height: 100%;
  }
}

.mask_transparent {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 300;
}

.px-12 {
  padding-left: 12rpx;
  padding-right: 12rpx;
}

.font-44 {
  font-size: 44rpx;
}

.font_color {
  @include main_color(theme);
}

.attrImg {
  width: 66rpx;
  height: 66rpx;
  border-radius: 6rpx;
  display: block;
  margin-right: 14rpx;
}

.switchTxt {
  height: 60rpx;
  flex: 1;
  line-height: 60rpx;
  box-sizing: border-box;
  background: #eeeeee;
  padding-right: 0 24rpx 0;
  border-radius: 8rpx;
  text-align: center;
}

.text-666 {
  color: #666;
}

.text-333 {
  color: #333 !important;
}

.iconColor{
	@include main_color(theme);
}
.activityIcon{
	color: #e93323;
}
.detailText {
  padding-bottom: 30rpx;
}
.spredGroupStyle {
  width: 450rpx;
  height: 76rpx;
  line-height: 76rpx;
  background: #e93323;
  border-radius: 40rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #ffffff;
}
.group-buy {
  background: #e93323;
  border-radius: 0px 76rpx 76rpx 0px;
}
.group-buy2{
	width: 450rpx !important;
	background: #e93323;
	border-radius:76rpx ;
}
.navbar .header .item.groupTabOn:before {
  position: absolute;
  width: 60rpx;
  height: 5rpx;
  background-repeat: no-repeat;
  content: "";
  background: #e93323;
  bottom: -10rpx;
  left: 50%;
  margin-left: -28rpx;
}
.groupColor {
  color: #e93323;
}
</style>
